<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="app1">{{title}}</title>
    <script src="scripts/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <!--VIEW-->
    <div id="app">
        {{title}}
        <h1 class="h">{{msg}}</h1>
        <login2></login2>
    </div>

    
    <div id="app-3">
      <span>条件判断</span>        
        <p>用户名：{{username}}</p>
        <p v-if="UserType==1">用户类型：VIP</p>
        <p v-else-if="UserType==2">用户类型：普通用户</p>
        <p v-else-if="UserType==3">用户类型：内测用户</p>
        <p v-else>用户类型：其他用户</p>
      </div>

      <div id="app-4">
        <ul>
          <li v-for="(item, index) in todos" :key="index">
              <span style="color:red;" v-if="item.text=='整个牛项目'">{{item.text}}</span>
            <span v-else>{{ item.text }}</span>
          </li>
        </ul>
      </div>

      <!--输入-->
      <div id="input">
          <p>{{message}}</p>
        <input v-model="message" />
      </div>


    <script type="text/javascript">   
    Vue.component('login2',{template:'<h1>我是第二种v创建出来的组件</h1>'});
    let inputVue=new Vue({
        el:"#input",
        data:{
            message:"输入框"
        }
        
    })

    

    let app=new Vue({
        el:"#app",
        //Model
        data:{
            title:"hello world,vue!",
            msg:"Vue框架学习"
        }
    })

    let app1=new Vue({
        el:"#app1",
        //Model
        data:{
            title:"hello world,title!",
            msg:"Vue框架学习1"
        }
    })

    var app3 = new Vue({
        el: '#app-3',
        data: {
            username:"xlb",
            UserType:1
        }
    })

    var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

    // console.log(Vue)
    console.log(app)
    </script>
</body>
</html>